<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="card">
        <!-- 工具栏 -->
        <div class="header">
          <PageTool ref="pageToolRef" btn-name="房产" @addEvent="addFn" @searchEvent="searchFn">
            <template slot="right">
              <el-row type="flex" align="middle">
                <el-select v-model="categoryVal" placeholder="选择分类" @change="categoryChange">
                  <el-option label="全部分类" value="all" />
                  <el-option
                    v-for="item in categoryList"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  />
                </el-select>
                <el-select v-model="agentVal" placeholder="选择经纪" @change="agentChange">
                  <el-option label="全部经纪" value="all" />
                  <el-option
                    v-for="item in agentList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-row>
            </template>
          </PageTool>
        </div>
        <div class="content">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="image" label="封面" width="180">
              <template v-slot="{ row }">
                <img :src="row.image" alt="" class="cover">
              </template>
            </el-table-column>
            <el-table-column
              prop="title"
              label="标题"
              width="180"
            />
            <el-table-column prop="tags" label="标签" width="120">
              <template v-slot="{row}">
                <span v-for="(item,index) in row.tags" :key="index" class="tags">{{ item }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址"
              width="180"
            />
            <el-table-column prop="category" label="分类">
              <template v-slot="{ row }">
                {{ row.category && row.category.title ? row.category.title : '' }}
              </template>
            </el-table-column>
            <el-table-column
              prop="agent.name"
              label="经纪"
              width="120"
            />
            <el-table-column prop="price" label="价格" />
            <el-table-column prop="desc" label="介绍" width="180" />
            <el-table-column
              prop="photos"
              label="图片"
              width="220"
            >
              <template v-slot="{row}">
                <div v-for="(item,index) in row.photos" :key="index" class="photos-box">
                  <img :src="item" alt="图片">
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
              <template v-slot="{row}">
                <el-button size="small" type="primary" @click="editFn(row.id)">编辑</el-button>
                <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="pageConfig._limit"
            :current-page="curPage"
            @current-change="toPageFn"
          />
        </el-row>
        <AddDialog ref="dialogRef" :dialog-visible.sync="dialogVisible" @updateEvent="getPropertiesFn" />
      </el-card>
    </div>
  </div>
</template>

<script>
// import PageTool from '@/components/PageTool'
import { getProperties, delProperty } from '@/api/property'
import { getCategories } from '@/api/categories'
import { getAgents } from '@/api/agents'
import AddDialog from './components/add-dialog.vue'
export default {
  components: {
    AddDialog
  },
  data() {
    return {
      pageConfig: {
        _limit: 3, // 每页显示的数据数量
        _start: 0 // 从哪个位置开始截取
      },
      // 房产列表
      tableData: [],
      total: 0,
      curPage: 1,
      dialogVisible: false, // 控制新增/编辑弹窗
      categoryList: [], // 下拉列表-全部分类
      agentList: [], // 下拉列表-全部经纪
      categoryVal: 'all', // 下拉列表选中项 --全部分类
      agentVal: 'all', // 下拉列表选中项 --全部经纪
      type: '', // 判断用户触发了什么操作
      title_contains: '' // 搜索框关键字
    }
  },
  async created() {
    this.getPropertiesFn()
  },
  methods: {
    // 点击 全部经纪 下拉列表项
    async agentChange() {
      // this.categoryVal = 'all'
      this.curPage = 1
      if (this.agentVal === 'all') {
        this.type = ''
        this.pageConfig = {
          _limit: 3, // 每页显示的数据数量
          _start: 0 // 从哪个位置开始截取
        }
        this.curPage = 1
        // 刷新
        this.getPropertiesFn()
        return
      }
      console.log(this.pageConfig)
      this.pageConfig = {
        ...this.pageConfig,
        _start: 0,
        agent: this.agentVal
      }
      const res = await getProperties(this.pageConfig)
      // console.log(151, this.pageConfig)
      this.tableData = res.data

      // 获取总数
      const obj = {}
      for (const key in this.pageConfig) {
        if (key !== '_limit' && key !== '_start') {
          console.log(key)
          obj[key] = this.pageConfig[key]
        }
      }
      // console.log('obj', obj)
      const result = await getProperties(obj)
      this.total = result.data.length
    },
    // 点击 全部分类 下拉列表项
    async categoryChange() {
      // this.agentVal = 'all'
      this.curPage = 1
      if (this.categoryVal === 'all') {
        this.type = ''
        this.pageConfig = {
          _limit: 3, // 每页显示的数据数量
          _start: 0 // 从哪个位置开始截取
        }
        // 刷新
        this.getPropertiesFn()
        return
      }
      this.pageConfig = {
        ...this.pageConfig,
        _start: 0,
        category: this.categoryVal
      }
      const res = await getProperties(this.pageConfig)
      console.log(this.pageConfig)
      this.tableData = res.data
      // 获取总数

      const obj = {}
      for (const key in this.pageConfig) {
        if (key !== '_limit' && key !== '_start') {
          obj[key] = this.pageConfig[key]
        }
      }
      const result = await getProperties(obj)
      this.total = result.data.length
    },
    // 搜索房产
    async searchFn() {
      // 获取头部下拉列表的分类列表
      const cateRes = await getCategories()
      // console.log('分类', result)
      this.categoryList = cateRes.data

      // 获取头部下拉列表的经纪列表
      const agentRes = await getAgents()
      this.agentList = agentRes.data

      this.curPage = 1
      this.categoryVal = 'all'
      this.agentVal = 'all'
      this.title_contains = this.$refs.pageToolRef.searchKey
      // console.log(title_contains)
      // 模糊搜索房产列表
      this.pageConfig = {
        _limit: 3, // 每页显示的数据数量
        _start: 0, // 从哪个位置开始截取
        title_contains: this.title_contains
      }
      const res = await getProperties(this.pageConfig)
      const result = await getProperties({ title_contains: this.title_contains })
      // console.log(res)
      this.tableData = res.data
      this.total = result.data.length
    },
    // 删除房产
    async delFn(id) {
      try {
        await this.$confirm('确定要删除吗', '警告', {
          cancelButtonText: '取消',
          confirmButtonText: '确定'
        })
        // 调用接口，实现删除
        await delProperty(id)
        this.$message.success('删除成功')
        // 刷新列表
        this.getPropertiesFn()
      } catch (err) {
        console.log(err)
        this.$message.info('已取消删除')
      }
    },
    // 编辑房产
    editFn(id) {
      this.dialogVisible = true
      this.$refs.dialogRef.getPropertyDetail(id)
      this.$refs.dialogRef.title = '编辑'
    },
    // 新增房产
    addFn() {
      this.dialogVisible = true
    },
    // 初始化 获取房产列表
    async getPropertiesFn() {
      // 添加loading效果
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      if (this.categoryVal !== 'all') {
        this.pageConfig.category = this.categoryVal
      }
      if (this.agentVal !== 'all') {
        this.pageConfig.agent = this.agentVal
      }
      if (this.title_contains) {
        this.pageConfig.title_contains = this.title_contains
      }

      console.log(280, this.pageConfig)
      // 调用接口，获取房产列表
      const res = await getProperties(this.pageConfig)
      this.tableData = res.data

      // 获取头部下拉列表的分类列表
      const result = await getCategories()
      // console.log('分类', result)
      this.categoryList = result.data

      // 获取头部下拉列表的经纪列表
      const agentRes = await getAgents()
      this.agentList = agentRes.data

      // 获取列表总数
      this.getTotal()
      // 关闭loading
      loading.close()
      // console.log(res)
    },
    // 获取房产列表数据总数
    async getTotal() {
      const obj = {}
      for (const key in this.pageConfig) {
        if (key !== '_limit' && key !== '_start') {
          obj[key] = this.pageConfig[key]
        }
      }

      const res = await getProperties(obj)
      this.total = res.data.length
    },
    // 页码改变
    toPageFn(val) {
      // console.log(val)
      // 当前的页码
      this.curPage = val
      console.log(this.curPage)
      // 获取某页数据
      this.pageConfig._start = (this.curPage - 1) * this.pageConfig._limit
      // // 刷新列表
      this.getPropertiesFn()
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  padding: 0 10px;
  .header {
    .el-select {
      border-radius: 3px;
    }
  }
  .content {
    .el-table__row {
      height: 180px;
    }
    .cover {
      height: 120px;
      width: 120px;
    }
    .tags {
      display: flex;
      justify-content: center;
      width: 90px;
      padding: 5px 10px;
      margin: 2px 0;
      border-radius: 20px;
      color: rgb(255, 255, 255);
      background-color: #409eff;
    }
    .photos-box {
      display: inline-block;
      width: 60px;
      height: 60px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
